<template>
  <!-- 首页内容 -->
  <div class="home">

    <!-- 加载中 -->
    <div class="loading"
         v-if="loadingShow">
      <van-loading type="spinner"
                   color="#1989fa" />
      <!-- <img src="../assets/logo.png"
           alt=""> -->
    </div>

    <!-- 首页内容 -->
    <div class="homeContent"
         v-else>
      <v-touch v-on:swipeup="swipeup">
        <!-- 内容 -->
        <div class="box">
          <div class="top">
            <img src="../assets/logo.png"
                 alt="">
          </div>
          <div class="bottom">
            <span>下滑参加</span>
            <i class="iconfont icon-down"
               @click="swipeup"></i>
          </div>
        </div>
      </v-touch>
    </div>

  </div>
</template>

<script>
import { getIndexData } from '../utils/api'
export default {
  name: 'Queue',
  data () {
    return {
      loadingShow: true
    }
  },
  created () {
    this.getIndexDatas()
  },
  mounted () {
    this.loadingTime()
  },
  methods: {
    // 一段时间后，加载中消失(也可以改成请求结束后)
    loadingTime () {
      setTimeout(() => {
        this.loadingShow = false
      }, 500)
    },
    // 获取数据
    async getIndexDatas () {
      let data = await getIndexData()
      console.log('数据', data);
    },
    // 下滑事件
    swipeup () {
      // console.log('下滑事件');
      this.$router.push('/photoUpload')
    }
  }
}
</script>

<style lang="less" scoped>
// 加载中页面
.loading {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  > img {
    width: 100%;
    height: 100%;
  }
  .van-loading.van-loading--spinner.van-loading--vertical {
    // height: 100%;
    // display: flex;
    // justify-content: center;
    // align-items: center;
  }
}
// 首页
.box {
  width: 100%;
  height: 100vh;
  background-color: pink;
  position: relative;
  .top {
    img {
      width: 100%;
      height: 100vh;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
  }
}
</style>